<template>
  <!-- 商品列表 -->
  <div>
    <el-breadcrumb :separator-icon="ArrowRight">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品列表</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
  <div class="box">
    <el-row>
      <el-col :span="24">
        <el-input
          v-model="input3"
          style="max-width: 256px; height: 40px"
          placeholder="请输入内容"
          class="input-with-select"
        >
          <template #append>
            <el-button :icon="Search" />
          </template>
        </el-input>
        <el-button type="primary" class="btn">添加商品</el-button>
      </el-col>
    </el-row>

    <!-- 列表 -->
    <el-table :data="tableData" stripe border style="width: 100%">
      <el-table-column prop="date" label="*" width="47" />
      <el-table-column prop="name" label="订单编号" />
      <el-table-column prop="address" label="订单价格" />
      <el-table-column prop="t" label="是否付款">
        <template #default="scope">
          <el-tag :type="scope.row.t ? '' : 'danger'">1111</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="po" label="是否发货" />
      <el-table-column prop="po" label="下单时间" />
      <el-table-column label="操作">
        <template #default>
          <el-button type="primary" :icon="Edit" />
          <el-button type="success" :icon="Location" />
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页样式 -->
    <div class="demo-pagination-block" style="margin-top: 20px">
      <el-pagination
        v-model:current-page="currentPage4"
        v-model:page-size="pageSize4"
        :page-sizes="[3, 5, 7, 9]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="10"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ArrowRight } from '@element-plus/icons-vue'
import { ref } from 'vue'
import { Edit, Search, Location } from '@element-plus/icons-vue'
const input3 = ref('')
const tableData = ref<any[]>([
  {
    date: '1',
    name: 'Tom',
    address: '40',
    t: true,
    po: '1000',
    flag: false,
    time: 4561565111
  },
  {
    date: '2',
    name: 'Tom',
    address: '40',
    t: true,
    po: '1000',
    flag: false,
    time: 4561565111
  },
  {
    date: '3',
    name: 'Tom',
    address: '40',
    t: false,
    po: '1000',
    flag: false,
    time: 4561565111
  },
  {
    date: '4',
    name: 'Tom',
    address: '40',
    t: true,
    po: '1000',
    flag: false,
    time: 4561565111
  }
])

//分页
const pageSize4 = ref(5)
const currentPage4 = ref(4)
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
}
</script>

<style scoped lang="scss">
.u {
  height: 32px;
  margin-top: 40px;
}

.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
  .btn {
    width: 98px;
    height: 40px;
    margin-left: 20px;
  }
}
.box {
  padding: 20px;
  margin-top: 15px;
  background: #fff;
  width: 97%;
}
</style>
